<template>
    <el-dialog :model-value="show" title="分配角色" @close="emit('hide')">
        <el-form :model="form" ref="formRef" :rules="rules">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="form.description" autocomplete="off" :rows="4" type="textarea" />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="CancelFn">取消</el-button>
                <el-button type="primary" @click="addFn">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang='ts'>
import { reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
import { addRoleAPI, editRoleAPI, getUserRoleAPI } from './api'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    id: {
        type: Number,
        default: 0
    },
    name: {
        type: String,
        default: ''
    },
    description: {
        type: String,
        default: ''
    }
})


const form = reactive<IRoleModel>({
    name: '',
    description: '',
    status: 0,
    id: 0
})
const rules = {
    name: [{ required: true, trigger: 'blur', message: '请输入角色名字' }]
}
const formRef = ref<FormInstance>();
const emit = defineEmits(['hide', 'ShutDown']);

watch(
    () => props.id,
    () => {
        if (props.id !== 0) {
            console.log('这是watch里面的props.name', props.name);
            console.log('这是watch里面的props.description', props.description);
            form.id = props.id
            form.name = props.name;
            form.description = props.description
        } else {
            form.id = 0
            form.name = ''
            form.description = ''
        }
    })

const addFn = () => {
    formRef.value?.validate((ok: boolean) => {
        if (ok) {
            ElMessageBox.confirm('此操作将添加角色信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                if (props.id !== 0) {

                    editRoleAPI(form).then(res => {
                        if (res.code === 200) {
                            ElMessage.success('修改成功');
                            formRef.value?.resetFields();
                            form.description = ''
                            emit('hide');
                        }
                    })
                } else {
                    addRoleAPI(form).then(res => {
                        if (res.code === 200) {
                            ElMessage.success('添加成功');
                            formRef.value?.resetFields();
                            form.description = ''
                            emit('hide');
                        }
                    })
                }

            }).catch(() => {
                formRef.value?.resetFields();
            })
        } else {
            ElMessage.warning("请输入角色名字")
        }
    })

}
const CancelFn = () => {
    formRef.value?.resetFields()
    emit('hide')
}
</script>
<style lang="scss" scoped>

</style>